import 'virtual:uno.css'
import '@arco-design/web-vue/dist/arco.less'
import './assets/css/global.less'

import { createPinia } from 'pinia'
import piniaPluginPersisitedstate from 'pinia-plugin-persistedstate'
import { createApp } from 'vue'
import { createRouter, createWebHistory } from 'vue-router'

import App from './App.vue'
import { routes } from './router/index'

const pinia = createPinia()

pinia.use(piniaPluginPersisitedstate)

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: routes
})

const app = createApp(App)

app.use(pinia)
app.use(router)
import type { Directive, DirectiveHook } from 'vue'

const shadowHandle: DirectiveHook = (el, binding) => {
  if (binding?.value === 'none') return
  const { filter, radius, position } = Object.assign(
    {},
    {
      filter: 100,
      radius: 150,
      position: true
    },
    binding?.value || {}
  )
  let shadow: HTMLDivElement | null = null

  el.addEventListener('mouseenter', () => {
    const followShadow = el.querySelector('.follow-shadow')
    if (followShadow) el.removeChild(followShadow)
    if (position) {
      el.style.position = 'relative'
    }
    shadow = document.createElement('div')
    shadow.className = 'follow-shadow'
    shadow.style.width = `${2 * radius}px`
    shadow.style.height = `${2 * radius}px`
    shadow.style.position = 'absolute'
    shadow.style.zIndex = '998'
    shadow.style.borderRadius = '50%'
    shadow.style.background = '#fff'
    shadow.style.pointerEvents = 'none'
    shadow.style.transition =
      'transform 100ms cubic-bezier(0.645, 0.045, 0.355, 1), opacity 300ms cubic-bezier(0.645, 0.045, 0.355, 1)'
    shadow.style.transform = `translate(-50%, -50%) scale(1)`

    shadow.style.mixBlendMode = 'overlay'
    shadow.style.filter = `blur(${filter}px)`

    el.appendChild(shadow)

    el.addEventListener('mousemove', (e: MouseEvent) => {
      if (shadow) {
        shadow.style.opacity = '1'
        const x = e.clientX - el.getBoundingClientRect().left
        const y = e.clientY - el.getBoundingClientRect().top
        shadow.style.left = `${x}px`
        shadow.style.top = `${y}px`
      }
    })
  })

  el.addEventListener('mouseleave', () => {
    if (shadow && shadow.parentNode) {
      shadow.parentNode.removeChild(shadow)
    }
  })
}

const shadow: Directive = {
  mounted: shadowHandle,
  updated: shadowHandle
}
app.directive('shadow', shadow)
app.mount('#cdn-website')
